<template>
  <a-modal v-model="visible" :width='1300'  title="工单详情"  footer=''>
      <a-table
          ref='table'
          size='middle'
          bordered
          childrenColumnName='childrenColumnName'
          :columns='columns'
          :dataSource='dataSource'
          :loading='loading'
          :pagination='ipagination'
          :rowKey="record => record.complaintId"
          @change='handleTableChange'
        >

        <span slot='purpose' slot-scope='text, record,index'>
          <span v-if="text.purpose==='98'">咨询类</span>
          <span v-else-if="text.purpose==='01'">建议类</span>
        <span v-else>投诉类</span>
        </span>
          <span slot='dealType' slot-scope='text, record,index'>
          <span v-if="text.dealType==='2'">已答复</span>
          <span v-else>办理中</span>
        </span>
      </a-table>

  </a-modal>
</template>

<script>
import ReportsEpidemicWeeklyService from '@/myService/ReportsEpidemicWeeklyService'

export default {
  name: 'StatisticsAddOrderDetailModel',
  data(){
    return{
      visible:false,
      dataSource: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      queryData:{
        beginDate:'',
        categoryId:'',
        pageIndex:1,
        pageSize: 10
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) =>
            <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '信访事项编号',
          dataIndex: 'xfjbh',
          align: 'center',
          ellipsis: true
        },
        {
          title: '信访目的',
          align: 'center',
          dataIndex: 'purpose',
          scopedSlots: { customRender: 'purpose' },
          ellipsis: true
        },
        {
          title: '问题属地',
          align: 'center',
          dataIndex: 'problemTerritory',
          ellipsis: true
        },
        {
          title: '内容分类',
          align: 'center',
          dataIndex: 'contentType',
          ellipsis: true
        },
        {
          title: '当前状态',
          align: 'center',
          dataIndex: 'dealType',
          scopedSlots: { customRender: 'dealType' },
          ellipsis: true
        },
        {
          title: '内容',
          align: 'center',
          width: 300,
          dataIndex: 'content',
          ellipsis: true
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'contactName',
          ellipsis: true
        },
        {
          title: '联系电话',
          align: 'center',
          dataIndex: 'contactPhone',
          ellipsis: true
        },
        {
          title: '关键字',
          align: 'center',
          dataIndex: 'keyName',
          ellipsis: true
        }

      ],
      /* table加载状态 */
      loading: false,
    }
  },
  methods:{
    open(dateRange, categoryId){
      if(this.queryData.beginDate!==dateRange.beginDate || this.queryData.categoryId!==categoryId){
        this.queryData.beginDate=dateRange.beginDate;
        this.queryData.categoryId=categoryId;
        this.ipagination.pageSize=10;
        this.ipagination.current=1;
        this.loadData();
      }
      this.visible=true;
    },
    loadData(){
      this.loading = true
      this.dataSource=[]
      this.queryData.pageSize = this.ipagination.pageSize
      this.queryData.pageIndex = this.ipagination.current
      this.ipagination.total=0;
      ReportsEpidemicWeeklyService.getPeriodEpidemicOrder(this.queryData).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      this.loadData()
    },
  }

}
</script>

<style scoped>

</style>